<template>
  <div class="comp-mointor-device-info">
    <div class="comp-mointor-device-info-header">
      <img src="@/assets/cloudV2/img/title.png" alt="">
      <span>设备概况</span>
    </div>
    <div class="comp-mointor-device-info-num">
      <div class="warning-info" v-for="item in devInfo">
        <div class="warning-num">{{ item.title }}</div>
        <div class="warning-num-each">
          <div class="warning-num-each-bg" v-for="i in item.data">{{ i }}</div>
        </div>
      </div>
    </div>
    <div class="comp-mointor-device-info-pie" id="deviceInfoPie"></div>
    <img class="left-top" src="@/assets/cloudV2/img/top-left.png" alt="">
    <img class="right-top" src="@/assets/cloudV2/img/top-left.png" alt="">
    <img class="right-bottom" src="@/assets/cloudV2/img/top-left.png" alt="">
    <img class="left-bottom" src="@/assets/cloudV2/img/top-left.png" alt="">
  </div>
</template>

<script setup>
import {onBeforeMount, onMounted, reactive, ref, watch} from "vue";
import * as echarts from "echarts";
const props = defineProps({
  devs: Array,
})
const numInfo = reactive({
  total:0,
  online: 0,
  offline: 0
})
const devInfo = ref(initNum())
onMounted(() => {
  initDeviceInfoPie()
})
watch(()=>props.devs,()=>{
  devInfo.value = initNum()
  initDeviceInfoPie()
})
function initNum(){
  numInfo.total = props.devs.length
  numInfo.online = props.devs.filter((item)=>{return  item.data?.substring(3) === '1'}).length
  numInfo.offline = numInfo.total - numInfo.online
  let arr = [
    {title: '设备总数',data: Array.from(numInfo.total.toString())},
    {title: '在线设备',data: Array.from(numInfo.online.toString())},
    {title: '关机设备',data: Array.from(numInfo.offline.toString())},
  ]
  arr.forEach((item)=>{
    var len =  (item.data).length
    if (len < 4){
      for (var i = 0; i < 4 - len; i++){
        (item.data).unshift('0')
      }
    }
  })
  return arr
}
function initDeviceInfoPie() {
  var myChart = echarts.init(document.getElementById('deviceInfoPie'));
  var option = {
    title: [{
      text: '在线率',
      subtext: (numInfo.online / numInfo.total * 100).toFixed(2) +'%',
      top: '38%',
      left: 'center',
      textStyle: {
        color: '#00ABEC',
        fontSize: 12,
      },
      subtextStyle: {
        fontSize: 16,
        color: "#ffffff"
      }
    }],
    tooltip: {
      trigger: "item"
    },
    series: [
      {
        name: '设备概况',
        type: 'pie',
        radius: ['45%', '70%'],
        color: ["#01B0F1", "rgba(78, 138, 160, 0.2)", "pink"],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: 'center'
          },
          emphasis: {
            show: false,
            textStyle: {
              // fontSize: '30',
              // fontWeight: 'bold'
            },

          }
        },
        itemStyle: {
          // color: ["#01B0F1","pink"],
          //  borderColor: "#01B0F1"
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        zlevel: 1,
        data: [{name: '在线', value: numInfo.online}, {name: '离线', value: numInfo.offline}]
      },
    ]
  }
  myChart.setOption(option);
}
</script>

<style scoped>
.comp-mointor-device-info {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background: url("@/assets/cloudV2/img/monitor-box-slide-pie-new.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.easy-scrollbar {
  width: 45%;
  height: 100%;
  padding-top: 26px;
}

.easy-scrollbar__wrap {
  height: 100%;

  overflow-y: scroll !important;
  overflow-x: hidden !important;
}

.esay-scrollbar__bar.is-vertical {
  top: 38px;
}

.warning-info {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.warning-num {
  color: #32EBCA;
  margin-bottom: 6px;
  font-weight: normal;
}

.warning-num-each {
  display: flex;
}

.warning-num-each-bg {
  margin-right: 4px;
  width: 20px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("@/assets/cloudV2/img/num-bg.png") no-repeat 50% 0;
}

.left-top {
  position: absolute;
  width: 5%;
  top: 0;
  left: 0;
}

.right-top {
  position: absolute;
  width: 5%;
  top: 0;
  right: 0;
  transform: rotate(90deg)
}

.right-bottom {
  position: absolute;
  width: 5%;
  bottom: 0;
  right: 0;
  transform: rotate(180deg)
}

.left-bottom {
  position: absolute;
  width: 5%;
  bottom: 0;
  left: 0;
  transform: rotate(-90deg)
}

.comp-mointor-device-info-header {
  color: #ffffff;
  position: absolute;
  top: 8px;
  left: 14px;
  display: flex;
  align-items: center;

}

.comp-mointor-device-info-header span {
  font-size: 14px;
  display: inline-block;
  margin-left: 8px;
}

.comp-mointor-device-info-num {
  color: #34ECCB;
  padding-top: 26px;
  padding-bottom: 12px;
  width: 45%;
  height: 100%;
  background-size: 100% 100%;
}

.comp-mointor-device-info-pie {
  width: 55%;
  height: 100%;
  /*border: 1px solid pink;*/
  /*border-radius: 50%;*/
  background-size: 100% 100%;
}
</style>